
<link rel="stylesheet" href="/static/Admin/css/bootstrap-select.min.css">
<script src="/static/Admin/webjs/bootstrap-select.min.js"></script>
<div id="openmain">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="ntModalLabel" type='{$request}'>{:strtoupper($title)}</h4>
    <input type="hidden" name="" id="pid" value="{$editParent_id|default=''}">
    <input type="hidden" name="" id="id" value="{$editid|default=''}">
</div>

<div class="modal-body">
        <div class="row clearfix">
                <div class="col-md-12 column">
                  <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                     <p></p>
                    </div>
                </div>
               </div>
   <div class="row clearfix">
        <div class="col-md-12 column">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" :class="{'active':index==0}" v-for="(langitem,index) in langs">
                    <a :href="'#'+langitem.code" :aria-controls="langitem.code" role="tab" data-toggle="tab"> {{langitem.name}}</a>
                </li>
            </ul>


            <form class="tab-content formbox">
                <div role="tabpanel" :class="{'tab-pane':true,'active':index==0}" :id="langitem.code"  v-for="(langitem,index) in langs">
                    <table class="table table-striped table-hover ntTable" style="padding-top:0">
                            <tbody>
                                <tr>
                                    <td>{:strtoupper(lang("top_rating"))}<span class="required"></span></td>
                                    <td>
                                        <div class="input-group" style="width: 200px;">
                                            <select :name="'pclass_'+langitem.code" class="selectpicker"  data-live-search="true" v-model="cateval" @change="changecateval">
                                                <option value="0">请选择</option>
                                                <option :value="cate.id" v-for="(cate,cateindex) in catedata" :style="{'padding-left': 20+20*cate.level+'px'}">
                                                    {{cate['name_'+langitem.code]}}
                                                </option>
                                            </select>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{:strtoupper(lang("product_category_name"))}<span class="required"></span></td>
                                    <td>
                                        <input type="text" class="form-control clasname" placeholder="{:lang('product_category_name')}" :name="'clasname_'+langitem.code" value="" v-model="catename['name_'+langitem.code]">
                                    </td>
                                </tr>
                                <tr>
                                    <td>{:strtoupper(lang('status'))}</td>
                                    <td  class="status">
                                        <label class="checkbox-inline">
                                            <input type="radio" :name="'status_'+langitem.code" value="1" :checked="catestate==1" @change="changestate(1)"> {:strtoupper(lang('normal'))}
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="radio"  :name="'status_'+langitem.code" value="3" :checked="catestate==3"  @change="changestate(3)"> {:strtoupper(lang("hide"))}
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="radio"  :name="'status_'+langitem.code" value="4" :checked="catestate==4"  @change="changestate(4)"> {:strtoupper(lang("off_the_shelf"))}
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="radio"  :name="'status_'+langitem.code" value="2" :checked="catestate==2"  @change="changestate(2)"> {:strtoupper(lang('delete'))}
                                        </label>
                                    </td>
                                </tr>
                                     <tr>
                                        <td>{:strtoupper(lang("classify"))}<span class="required"></span></td>
                                        <td>
                                            <input type="text" class="form-control" placeholder="{:lang('classify')}" name="drank"  v-model="catessort">
                                        </td>
                                    </tr>
                            </tbody>
                    </table>
                </div>
            </form>
        </div>
    </div>

    
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:strtoupper(lang('cancel'))}</button>
    <button type="button" class="btn btn-primary" style="padding-left:24px;padding-right:24px" @click="save"><span class="glyphicon glyphicon-floppy-disk"></span>{:strtoupper(lang('save'))}</button>
</div>
</div>
<script>
    
    new Vue({
        el:'#openmain',
        data:()=>({
            langs:[],
            catedata:[],//上级分类
            cateval:0,//上级分类的值
            catename:{},//产品分类名称
            catestate:1,//状态
            catessort:10,//排序
            oldcatessort:0
        }),
        mounted(){
            $.ajax({
                url:'/admin/api/getLangType',
                type:'post',
                success:data=>{
                    this.langs = JSON.parse(data)
                    this.langs.forEach(element => {
                        this.catename['name_'+element.code]=''
                    });
                }
            })
            this.getdata()
        },
        methods:{
            getdata(){
                if($('#ntModalLabel').attr('type')=='edit'){
                    var url = '/admin/procat/cateEdit?request=requestAjax&pid='+$('#pid').val()+'&id='+$('#id').val();
                }else{
                    var url = '/admin/procat/cateAdd?request=requestAjax&id='+$('#pid').val();
                }
                $.ajax({
                    url:url,
                    type:'post',
                    success:data=>{
                        data=JSON.parse(data)
                        this.catedata=data.data.catedata
                        this.cateval = data.data.editParent_id
                        if($('#ntModalLabel').attr('type')=='edit'){
                            this.catename=data.data.detail
                            this.catestate= data.data.detail.status
                            this.catessort= data.data.detail.drank
                            this.oldcatessort= data.data.detail.drank
                        }
                        var time=setInterval(()=>{
                            if($('.selectpicker').length){
                                $('.selectpicker').selectpicker({});
                                $(".selectpicker").selectpicker('refresh');
                                clearInterval(time)
                            }                            
                        },100)
                    }
                })
            },
            changestate(type){
                this.catestate=type
            },
            save(){
                if($('#ntModalLabel').attr('type') =='edit' ){
                    var url = '/admin/procat/cateEdit?request=update&id='+$('#id').val();
                }else{
                    var url = '/admin/procat/cateAdd?request=insert';
                }
                $.ajax({
                    url:url,
                    type:'post',
                    data:{
                        cateval:this.cateval,
                        catename:this.catename,
                        catestate:this.catestate,
                        catessort:this.catessort,
                        oldcatessort:this.oldcatessort
                    },
                    success:function(data){
                        data = JSON.parse(data)
                        if(data.status==1){
                            change_mes_type('.alert',data.status)
                            $('.alert').show()
                            $('.alert p').html('*'+data.msg+'<br>')
                            //toastr.info(data.msg)
                            $('#procat_editModal').modal('toggle')
                        }else{
                            change_mes_type('.modal-body .alert',data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*'+data.msg+'<br>')
                            //toastr.warning(data.msg);
                            state=true
                        }
                    }
                }) 
            },
            changecateval(){
                this.$nextTick(()=>{
                    $('.selectpicker').selectpicker({});
                    $(".selectpicker").selectpicker('refresh');
                })
            }
        }
    })
</script>
